<template>
  <div>
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="返回" sub-title="博客文章详情" @back="backToIndex" />

    <div class="content-box">
      <div class="descriptions">
        <a-descriptions :title="article.title ? article.title : '文章加载中'" bordered>
          <a-descriptions-item label="作者">缩月</a-descriptions-item>
          <a-descriptions-item label="发布时间">{{ article.time }}</a-descriptions-item>
          <a-descriptions-item label="类型">{{ article.category }}</a-descriptions-item>
          <a-descriptions-item label="标签">
            <a-tag v-for="tag in article.tags" :key="tag" color="green">
              {{ tag }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="简介">
            <div v-html="article.summary"></div>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <a-divider>文章详情</a-divider>
      <div class="article-content">
        <div v-html="article.content"></div>
      </div>
      <a-divider>文章评论区</a-divider>
      <div class="comment-box">
        <comment-add :parentId="0"></comment-add>
        <div v-if="commentsList.length === 0">
          <a-empty>
            <template #description>
              <span>
                暂无评论，快添加你对文章的看法吧
              </span>
            </template>
          </a-empty>
        </div>
        <div v-else>
          <comment-list :commentsList="commentsList" />
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script lang="ts">
import { ref, reactive, defineComponent, onMounted, provide, Ref } from "vue";
import { useRoute, useRouter } from "vue-router"
import { oneArticle, } from "@/api/article"
import { getComments, addComment as addTheComment } from "@/api/comment"
import CommentList from "@/components/CommentList.vue"
import CommentAdd from "@/components/CommentAdd.vue";
import { CommentItem, PlainObject } from "@/bean"
import { message } from "ant-design-vue"
import { deepFind } from "@/utils/index"
import MyFooter from '../components/MyFooter.vue';
export default defineComponent({
  name: "ArticleDetail",
  components: {
    CommentList,
    CommentAdd,
    MyFooter
  },
  setup() {
    // 获取当前路由
    const route = useRoute()
    // 获取路由实例
    const router = useRouter()
    let article: any = ref({})
    // let commentList = ref([])
    function backToIndex() {
      router.go(-1)
    }

    const commentsList: Ref<CommentItem[]> = ref([])
    let articleId = ref(0);
    onMounted(async () => {
      if (route.query.id) {
        articleId.value = parseInt(route.query.id as string)
        try {
          let res = await oneArticle({ id: articleId.value })
          res.data.tags = res.data.tags.split(',')
          article.value = res.data
          res = await getComments({ id: articleId.value })
          commentsList.value = res.data
        } catch (e) {
          router.go(-1)
        }
      }
      else {
        message.error("没有文章id")
        router.go(-1)
      }
    })

    function addComment(comment: CommentItem) {
      addTheComment(comment).then((res: any) => {
        let item:CommentItem=res.data as CommentItem
        if (item.parentId !== 0) {
          //有父对象，找父对象，之后插入父对象的数组
          let commentSup = deepFind(commentsList.value, item.parentId)
          console.log("添加的父节点对象",commentSup)
          commentSup.children.unshift(item)
        } else {
          //父对象为空，直接添加
          commentsList.value.unshift(item)
        }
      })
    }
    provide('addComment', addComment)
    provide('articleId', () => articleId.value)
    return {
      backToIndex,
      article,
      commentsList,
      addComment
    };
  },
});
</script>

<style lang="less">
@import url('~@/style/github.less');

.content-box {
  margin: 20px 20% 30px 5%;

  .descriptions {
    background-color: rgba(240, 240, 240, 0.4);
    padding: 10px 10px;
    border-radius: 5px;
    text-align: left;

    .ant-descriptions-title {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 30px;
      padding-left: 10px;
      font-weight: bold;
    }

  }

  .article-content {
    margin: 10px 0;
    background-color: rgba(255, 255, 255, 1);
    padding: 20px 10px;
    border-radius: 5px;

  }

  .comment-box {
    margin: 10px 0;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 10px 10px;
    border-radius: 5px;
  }
}
</style>